<template>
  <div class="home">
    <div class="head">
      <input
        type="text"
        placeholder="商品名称"
        v-model="word"
        @keyup.enter="add"
      />
    </div>
    <ul>
      <li>
        <span>编号</span>
        <span style="color: red; fontsize: 12px" @click.stop="pai">
          <span v-show="!flag">升序</span>
          <span v-show="flag">降序</span>
        </span>
      </li>
      <li>名称</li>
      <li>
        <span>价格</span>
        <span style="color: red; fontsize: 12px" @click.stop="pan">
          <span v-show="!show">升序</span>
          <span v-show="show">降序</span>
        </span>
      </li>
    </ul>
    <ol>
      <li v-for="(item, key) in list" :key="key">
        <span>{{ item.id }}</span>
        <span>{{ item.goods_name }}</span>
        <span>{{ item.price }}</span>
      </li>
    </ol>

    <div class="foot">
      每页<input
        type="text"
        class="txt"
        @change="search"
        v-model.number="pageSize"
      />条,共10条
    </div>
    <div>
      <button
        class="btn1"
        v-for="index in pageNum"
        :key="index"
        @click="qie(index)"
      >
        {{ index }}
      </button>
    </div>
  </div>
</template>
<script>
import data from "../../public/data";
console.log(data);
export default {
  data() {
    return {
      list: data.data,
      word: "",
      flag: false,
      show: false,
      pageNum: 1,
      pageSize: 10,
    };
  },
  methods: {
    add() {
      this.list = data.data;
      this.list = this.list.filter((item) => {
        return item.goods_name.includes(this.word);
      });
      this.word = "";
    },
    pai() {
      this.flag = !this.flag;
      if (this.flag) {
        this.list = this.list.sort(function (a, b) {
          return a.id - b.id;
        });
      } else {
        this.list = this.list.sort(function (a, b) {
          return b.id - a.id;
        });
      }
    },
    pan() {
      this.show = !this.show;
      if (this.show) {
        this.list = this.list.sort(function (a, b) {
          return a.price - b.price;
        });
      } else {
        this.list = this.list.sort(function (a, b) {
          return b.price - a.price;
        });
      }
    },
    search() {
      if (this.pageSize == "") {
        this.pageSize = 10;
      }
      this.list = data.data.slice(0, this.pageSize);
      this.pageNum = Math.ceil(data.data.length / this.pageSize);
    },
    qie(k) {
      if (k == 1) {
        this.list = data.data.slice(0, this.pageSize);
      }
      let num = (k - 1) * this.pageSize;
      this.list = data.data.slice(num, this.pageSize + num);
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
ul {
  width: 100%;
  height: 40px;
  background: gray;
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  font-size: 20px;
  line-height: 40px;
  list-style: none;
}
ul li {
  flex: 1;
  text-align: center;
}
ol {
  width: 100%;
  margin-top: 10px;
  list-style: none;
}
ol li {
  width: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
}
ol span {
  flex: 1;
  text-align: center;
}
.btn1 {
  width: 40px;
  height: 40px;
  background: gray;
}
.foot {
  margin-bottom: 30px;
  margin-top: 30px;
}
.txt {
  width: 100px;
  height: 40px;
  font-size: 30px;
}
</style>
